<template>
  <div class="main_box">
    <el-row>
      <el-col :span="12">
        <div class="opration_wrap">
          <el-button
            type="primary"
            icon="fa fa-mail-forward"
            @click="returnList"
          >返回</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="detail_wrap">
      <div class="tit">
        <h2>基础信息</h2>
      </div>
      <div class="con">
        <ul>
          <li>
            <label class="label">姓名:</label>
            <span>{{dataInfo.patientName}}</span>
          </li>
          <li>
            <label class="label">性别:</label>
            <span v-if="dataInfo.patientSex == 1">男</span>
            <span v-else-if="dataInfo.patientSex == 2">女</span>
          </li>
          <li>
            <label class="label">年龄:</label>
            <span>{{dataInfo.patientAge}}</span>
          </li>
          <li>
            <label class="label">电话:</label>
            <span>{{dataInfo.patientPhone}}</span>
          </li>
          <li>
            <label class="label">身份证:</label>
            <span>{{dataInfo.patientCard}}</span>
          </li>
        </ul>
      </div>

      <div class="tit">
        <h2>病情信息</h2>
      </div>
      <div class="con">
        <el-row ref="tableRow">
        <el-table :data="dataInfo.healthUploadList"  :fit="true" highlight-current-row>
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="healthDate" label="病情日期"  width="180"></el-table-column>
          <el-table-column prop="healthType" label="病情类型" :formatter="formatHealthType"></el-table-column>
          <el-table-column prop="healthDesc" label="病情描述"></el-table-column>
          <el-table-column  label="图片信息">
            <template slot-scope="scope">
              <!--<img v-for="url in scope.row.imageList"
                   :src="url" style="width: 200px;height: 180px"/>-->
              <el-popover v-for="url in scope.row.imageList" :key="url" placement="right" width="320" trigger="hover" :open-delay="1000">
                <img class="" :src="url" v-min="url" slot="reference"
                     style="max-width:100px;max-height:100px; cursor: pointer;" />
                <img style="max-width:900px;max-height:900px;" :src="url" />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column  label="视频信息">
            <template slot-scope="scope">
              <el-popover v-for="url in scope.row.videoList" :key="url"  placement="right" width="320" trigger="hover" :open-delay="1000">
                <video class="" :src="url" v-min="url" slot="reference"
                     style="max-width:100px;max-height:100px; cursor: pointer;" />
                <video style="max-width:900px;max-height:900px;" :src="url" />
              </el-popover>
             <!-- <video  v-for="url in scope.row.videoList" :src="url" style="width: 200px;height: 180px"/>-->
            </template>
          </el-table-column>
          <el-table-column prop="createDate" label="创建时间"  width="180"></el-table-column>
        </el-table>
        </el-row>
      </div>

    </div>
  </div>
</template>

<script>
  import CustomerApi from "@/api/customer/customer";
export default {
  data() {
    return {
      dataInfo: {}
    };
  },
  methods: {
    getData() {
      CustomerApi.getCustomerHealthInfo({
        relationId: this.$route.query.id,
        relationType: this.$route.query.type
      }).then(res => {
        this.dataInfo = res.data;
      });
    },
    //病情类型（1.症状 2.检查结果 3.诊断 4.治疗 5.康复情况）
    formatHealthType (row, column, cellValue) {
      if (cellValue === 1) {
        return '症状'
      } else if (cellValue === 2) {
        return '检查结果'
      } else if (cellValue === 3) {
        return '诊断'
      } else if (cellValue === 4) {
        return '治疗'
      } else if (cellValue === 5) {
        return '康复情况'
      }
    },
    formatDate(value) {
      return this.$Utils.formatDate(value, "yyyy-MM-dd");
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path:'/report/reportManagement'});
    }
  },
  mounted() {
    this.getData();
  },

};
</script>
<style lang="scss" src="@/assets/css/views/Detail.scss" scope>
</style>
